<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入绑定</title>
</head>
<body>
    <!-- 
        参考学习： https://cn.vuejs.org/guide/essentials/forms.html
    -->
    <script src="./vue.global.prod.js"></script>

    <div id="app">
        <h1>{{ message }}</h1>
        <input type="text" name="" id="" v-model="num">
        <p>{{num}}</p>

        <div>
            <input type="checkbox" id="checkbox" v-model="checked" />
            <label for="checkbox">{{ checked }}</label>
        </div>
        

        <div>
            <div>Checked names: {{ checkedNames }}</div>

            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>

            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>

            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
        </div>

        <div>
            <div>性别: {{ sex }}</div>

            <input type="radio" id="one" value="男" v-model="sex" />
            <label for="one">男</label>

            <input type="radio" id="two" value="女" v-model="sex" />
            <label for="two">女</label>
        </div>

        <div>
            <div>Selected: {{ selected }}</div>

            <select v-model="selected">
                <option disabled value="">Please select one</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>

        </div>


        <div>
            <div>{{toggle}}</div>
            <input
                type="checkbox"
                v-model="toggle"
                :true-value="aggree"
                :false-value="noagree" />
        </div>

        <div>
            <input type="text" name="" id="" v-model.lazy="num">
            <br>
            <input type="text" name="" id="" v-model.number="num" type="number">
            <p>{{num}}</p>
        </div>
    </div>

    <script>
        // 对象解构，从Vue对象中获取createApp函数
        const { createApp,ref,reactive } = Vue

        // 通过createApp函数创建一个app对象
        const app = createApp({
            setup() {
                
              const message = ref('Hello World!')
              const num = ref(111)
              const checked = ref(false)
              const sex = ref('男')
              const selected = ref('A')
              const toggle = ref(null)
              const aggree = ref('同意')
              const noagree = ref('不同意')
              const checkedNames = reactive(['Jack'])
                
              return {
                    message,
                    num,
                    checked,
                    checkedNames,
                    sex,
                    selected,
                    toggle,
                    aggree,
                    noagree
                }
            },

        })

        // app对象挂载到id="app"的HTML元素，关联起来
        app.mount('#app')

    </script>

</body>
</html>